<blockquote class="layui-elem-quote">

    <div class="layui-collapse" lay-filter="newRoom">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">新建房间</h2>
            <div class="layui-colla-content">
                <form class="layui-form" *ngIf="room">
                    <div class="layui-form-item">
                        <div class="layui-form-inline">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" required lay-verify="required" placeholder="请输入房间名称" autocomplete="off" class="layui-input" [(ngModel)]="room.name">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-form-inline">
                            <label class="layui-form-label">房间类型</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" required lay-verify="required" placeholder="请输入房间类型" autocomplete="off" class="layui-input" [(ngModel)]="room.type">
                            </div>
                        </div>
                        <div class="layui-form-inline">
                            <label class="layui-form-label">房间状态</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" required lay-verify="required" placeholder="EMPTY/FULL" autocomplete="off" class="layui-input" [(ngModel)]="room.status">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-form-inline">
                            <label class="layui-form-label">描述信息</label>
                            <div class="layui-input-block">
                                <textarea name="desc" placeholder="请输入内容" class="layui-textarea" [(ngModel)]="room.desc"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo" (click)="createRoom()">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</blockquote>

<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>房间编号</th>
            <th>房间名称</th>
            <th>所属类型编号</th>
            <th>房间状态</th>
            <th>相关操作</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let room of rooms">
            <td>{{room.id}}</td>
            <td>{{room.name}}</td>
            <td>{{room.type}}</td>
            <td>{{room.status}}</td>
            <td>
                <a class="layui-btn layui-btn-xs" lay-event="edit" (click)="onSelect(room)">详细信息</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" (click)="deleteRoom(room)">删除</a>
                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="newroom" *ngIf="room.status=='EMPTY'" (click)="orderRoom(room)">订房</a>
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="goout" *ngIf="room.status=='FULL'" (click)="cancelRoom(room)">退房</a>
            </td>
        </tr>
    </tbody>
</table>